<template>
  <div class="m-badge">
    <slot></slot>
    <div v-if="type === 'ellipsis'" class="badge-container">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div v-if="type === 'value' && value && value !== ''" class="badge-container">{{ value }}</div>
    <div v-if="type === 'dot'" class="badge-container-dot"></div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number]
    },
    type: {
      type: String,
      default: 'value'
    }
  }
}
</script>

<style lang="scss">
.m-badge {
  position: relative;
  .badge-container {
    display: flex;
    align-items: center;
    position: absolute;
    top: -0.8rem;
    left: 70%;
    padding: 0 5px;
    height: 2rem;
    min-width: 2rem;
    line-height: 1.9rem;
    border: 2px solid white;
    border-radius: 1rem;
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
    background-color: rgba(241, 44, 32, 1);
    color: #ffffff;
    .dot {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      background-color: #fff;
      border-radius: 50%;
      &:not(:first-of-type) {
        margin-left: 2px;
      }
    }
  }
  .badge-container-dot {
    position: absolute;
    top: -10%;
    left: 100%;
    width: 0.8rem;
    height: 0.8rem;
    background-color: red;
    border-radius: 50%;
  }
}
</style>